<!-- ShadeView.vue -->
<template>
  <div class="shade">
    <el-breadcrumb class="e_bread" separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统设置</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div class="text item">
        <p>系统组件视觉大小</p>
        <el-button-group>
          <el-button :class="ind===index?'active':''" @click="btnClassClick(index)" v-for="item,index in btnLis" size="medium">{{item}}</el-button>
        </el-button-group>
      </div>
      <div class="text item">
        <p class="navTxt">收起导航栏</p><el-switch v-model="value1"></el-switch>
      </div>
      <div class="text item">
        <p class="navTxt">主页显示疫情图</p><el-switch v-model="value2"></el-switch>
      </div>
      <div class="text item">
        <el-button type="primary" size="medium">保存并应用</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value1: false,
      value2: true,
      ind: 0,
      btnLis: ['正常', '小号', '超小号']
    }
  },
  methods: {
    btnClassClick(index) {
      this.ind = index;
    }
  }
}
</script>
<style lang='scss' scoped>
.e_bread {
  margin: 15px 15px;
  margin-bottom: 10px;
}
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
  display: flex;
  justify-content: start;
  align-items: center;
}

.box-card {
  width: 88vw;
  margin-left: 1vw;
}
.active {
  background-color: #409EFF;
  color: #fff;
}
.item p {
  margin-right: 10px;
}
</style>